// 注册账号

<template>
	<view>
		<view class="title-box">注册账号</view>
		<!-- 输入框 -->
		<view class="input-box">

			<icon-input label="用户名" labelStyle="width:50px" type="text" placeholder="用户名/手机号" @input="postForm.username=$event" :value="postForm.username"></icon-input>
			<icon-input label="密码" labelStyle="width:50px" type="password" placeholder="请输入密码" @input="postForm.password=$event" :value="postForm.password"></icon-input>
			<icon-input label="昵称" labelStyle="width:50px" placeholder="昵称"  v-model="postForm.nickname"></icon-input>
			<icon-input label="头像" labelStyle="width:50px" placeholder="头像url" v-model="postForm.avatar"></icon-input>
			<view class="input-tip">* 请输入6-12位密码，包含字母、数字以及特殊符号</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-box" @tap="confirm">确定</view>
	</view>
</template>

<script>
	import iconInput from "@/components/icon-input.vue"
	export default {
		components: {
			iconInput
		},
		data() {
			return {
				postForm: {
					invitation_code: "",
					customer_name: '',
					type: 'mobile',
					mobile: 17113189489,
					captcha: '',
					password: ''
				},
				newPassword: '',
				codeText: '获取短信验证码',
				codeFlag: true
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.agent) {
				this.postForm.invitation_code = e.agent
			}
		},
		methods: {
			// 获取短信验证码
			async getCode() {
				if (!this.codeFlag) return
				if (!this.postForm.mobile) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				const res = await this.$http.post('/api/kuerp/order/sms/send', {
					mobile: this.postForm.mobile,
					event: 'register'
				})
				if (res.code == 200) {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					})
					this.codeFlag = false
					let count = 60
					let countDown = () => {
						count--
						this.codeText = count + '秒后重新获取'
						if (count === 0) {
							clearInterval(timer)
							this.codeFlag = true
							this.codeText = '获取短信验证码'
						}
					}
					countDown()
					const timer = setInterval(() => {
						countDown()
					}, 1000)
				}
			},
			// 确定
			async confirm() {
				if (!this.postForm.mobile) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}


				if (!this.postForm.password) {
					return uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
				}
				this.newPassword = this.postForm.password
				if (!this.newPassword) {
					return uni.showToast({
						title: '请再次输入新密码',
						icon: 'none'
					})
				}

				if (this.postForm.password !== this.newPassword) {
					return uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
				}

				const res = await this.$http.post('/api/user/reg', this.postForm)
				if (res.code == 200) {
					uni.showToast({
						title: '注册成功',
						icon: 'success',
						mask: true
					})
					setTimeout(async () => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		margin: 80rpx 60rpx 52rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #111111;
	}

	// 输入框
	.input-box {
		.code {
			font-size: 32rpx;
			color: #fe492f;
		}

		.input-tip {
			margin-top: 20rpx;
			padding-left: 60rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}

	// 按钮
	.btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 80rpx auto 0;
		width: 630rpx;
		height: 80rpx;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #ffffff;
		background: #fe492f;
	}
</style>